<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onlineretailers</title>
	<style>
.header{
	width: 1300px;
	height: 1900px;
	margin: 0 auto;
	}
	.part1{
		width: 1900px;
		height: 310px;
	}
	.pl{
		margin-top: 70px;
	}
	.header img{
			float: left;
	}
	ul{
		float: left;
		height: 40px;
		list-style: none;/*去点点*/
		margin-top: 10px;
	}
	li{
		float: left;
	 	margin-left: 25px;
	}
	a{
		color: white;
		text-decoration: none;
		float: left;
	}
	button{
		float: left;
		width: 50px;
		height: 20px;
		margin-top: 3px;
	
	}
	.head1{
		width: 1300px;
		height: 45px;
		background-color: black;
		float: left;
	}
	.bu1{
		float: left;
		border: 1px solid orange;
		margin-left: 200px;
		margin-right: 10px;
	}
	.bu2{
		float: left;
		color: black; 
		background-color: orange;
	}
	.part12{
		width: 1300px;
		height: 360px;
		overflow: hidden;
	}
.part2{
		width: 360px;
		height: 350px;
		float: left;
		margin-left: 20px;
	}
	.pictrue2{
		float: left;
		margin-left: 15px;
	}
	h1{
		margin:0;
		padding:0;
		margin-left: 130px;
		margin-top: 50px;
	}
	.pl{
		margin-top: 180px;
		margin-left: 10px;
	}
	.pick{
		margin-left:40px; 
	}
	.part3{
		width: 1300px;
		height: 500px;
		background-color:#f2f2f2; 
		overflow: hidden;
	}
	.pictrue3{
		width: 385px;
		height: 370px;
		background-color: white;
		float: left;
		margin-left: 15px;
		margin-left: 35px;
	}
	.tittle1{
		color: #6e6e6e;
	}
	.tittle2{
		margin-left: 40px;
	}
		
	h3{
		color: orange;
		margin-left: 250px;
		margin-top: -40px;

	}
	.p1{
		float: right;
	/*	margin-left: 150px;*/
	}
	.p2{
		float:right;
		color: white;
		background-color: orange;
		margin-left: 20px;
		padding:5px 15px; 
		margin-right: 10px;
	}
.part4{
		width: 1300px;
		height: 500px;
		overflow: hidden;
	}
	.pictrue4{
		width: 385px;
		height: 370px;
		border: 1px solid #ccc;
		float: left;
		margin-left: 15px;
		margin-left: 35px;
	}
	.part5{
		width: 1300px;
		height: 182px;
		background-color: #304363;
		overflow: hidden;
	}
	.part51{
		width: 70px;
		height: 150px;
		float: left;
		margin-left: 70px;
	}
	.aa{
		margin-right: 30px;
	}

	.p31{
			color: white;
			font-size: 50px;
			font-family: 宋体;
			margin-left: 5px;
	}
	.p32{
			margin:5px;
	}
	.p3{
 			color: #aebece;
 			font-size: 15px;
 			font-family: 宋体;
	}
	.picture5{
		margin-top: 35px;
		margin-left: 400px;
	}
	.part6{
		width: 1300px;
		height: 39px;
		background-color: #1b2435;
		overflow: hidden;
	}
	.p61{
		color: #aebece;
		float: left;
		margin-top: 8px;
		margin-left: 60px;
	}
	.p62{
		color: #aebece;
		float: left;
		margin-top: 8px;
		margin-left: 250px;
	}
	.part7{
		width: 1300px;
		height: 37px;
	}
	.part8{
		width: 1300px;
		height: 40px;
		background-color: #1b2420;
	}
	.p81{
		margin-left: 20px;
	}
	</style>

</head>
<body>
<div class="header">
		<div class="head1">
		<img src="images/logo.jpg">
			<ul>
				<li><a class="word1" href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">每日作业</a></li>
				<li><a href="#">免费视频</a></li>
				<li><a href="#">免费直播厅</a></li>
				<li><a href="#"> 问答</a></li>
				<li><a href="#"> 学习指南</a></li>
				<li><a href="#">个人中心</a></li>
				<button class="bu1">登录</button>
				<button class="bu2">注册</button>
			</ul>
		</div>
	<div class="part1">
		<img src="images/banner.jpg" width="1300px" height="300px">
	</div >
	<div class="part12">
	<img class="pictrue2 pl" src="images/L.jpg">
	<div class="part2 ">
		<h1>平面套餐</h1>
		<img class="pictrue2" src="images/tu.jpg">
	</div>
	<div class="part2">
		<h1>平面套餐</h1>
		<img class="pictrue2" src="images/package_pic2.jpg">
	</div>
	<div class="part2 ">
		<h1>平面套餐</h1>
		<img class="pictrue2 " src="images/tu.jpg">
		</div>
		<img class="pictrue2 pl pick" src="images/R.jpg">
		</div>
	<div class="part3">
	<h2 class="tittle2">ui设计</h2>
		<div class="pictrue3">
			<img src="images/ui_pic1.jpg"/>
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>
				课程以基础入门为主，详细讲解软件的每一个工具的使
				<br/>
				用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 
			</p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
		<div class="pictrue3">
			<img src="images/ui_pic2.jpg">
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>课程以基础入门为主，详细讲解软件的每一个工具的使<br/>用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 </p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
		<div class="pictrue3">
			<img src="images/ui_pic3.jpg">
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>课程以基础入门为主，详细讲解软件的每一个工具的使<br/>用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 </p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
	</div>
	<div class="part4">
	<h2 class="tittle2">平面设计</h2>
		<div class="pictrue4">
			<img src="images/pm_pic1..jpg">
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>课程以基础入门为主，详细讲解软件的每一个工具的使<br/>用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 </p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
		<div class="pictrue4">
			<img src="images/pm_pic2.jpg">
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>课程以基础入门为主，详细讲解软件的每一个工具的使<br/>用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 </p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
		<div class="pictrue4">
			<img src="images/pm_pic3..jpg">
			<h2 class="tittle1">Photoshop标题</h2>
			<h3>&yen1400.00</h3>
			<p>课程以基础入门为主，详细讲解软件的每一个工具的使<br/>用与技巧，让喜欢PS的你能够对软件迅速熟练及运用 </p>
			<p class="p2">去看看</p>
			<p class="p1">已经有3215人购买</p>
		</div>
	</div>
	<div class="part5">
		<div class="part51">
			<p class="p3 p31">新手入门</p>
			<p class="p3 p32">如何注册</p>
			<p class="p3 p32">如何登录</p>
			<p class="p3 p32">账号设置</p>
			<p class="p3 p32">账号安全</p>
		</div>
		<div class="part51 aa">
			<p class="p3 p31">新手入门</p>
			<p class="p3 p32">如何注册</p>
			<p class="p3 p32">如何登录</p>
			<p class="p3 p32">账号设置</p>
			<p class="p3 p32">账号安全</p>
		</div>
		<div class="part51 aa">
			<p class="p3 p31">新手入门</p>
			<p class="p3 p32">如何注册</p>
			<p class="p3 p32">如何登录</p>
			<p class="p3 p32">账号设置</p>
			<p class="p3 p32">账号安全</p>
		</div>
		<div class="part51 aa">
			<p class="p3 p31">新手入门</p>
			<p class="p3 p32">如何注册</p>
			<p class="p3 p32">如何登录</p>
			<p class="p3 p32">账号设置</p>
			<p class="p3 p32">账号安全</p>
		</div>
		<div class="part51">
		<img class="picture5" src="images/ewm.jpg">
		</div>
	</div>
	<div class="part6">
		<p class="p61">版权所有 2006 - 2015</p>
		<p class="p62">京ICP备08001421号京公网安备110108007702</p>
	</div>
	<div class="part7"></div>
	<div class="part8">
		<img class="p81" src="images/aa.png">
	</div>
	</div>
</body>
</html>